<template>
  <view class="me">
    <u-navbar title="个人中心" :autoBack="true">
    </u-navbar>
    <view style="height: 44px;" />
    <view class="me-content">
      <view class="me-left">
        <u-cell :title="user.nickname" :border="false" @click="handleUserClick" ref="cell">
          <view slot="label">

          </view>
          <u-avatar style="margin-right: 12px;" slot="icon" />
        </u-cell>
      </view>
      <view class="me-right"></view>
    </view>
    <Login ref="loginRef" :show="show" />
  </view>
</template>

<script lang="ts">
import { Component, Vue, Ref } from "vue-property-decorator"
import Login from "@/components/login/index.vue"

@Component({
  components: {
    Login
  }
})
export default class Me extends Vue {
  @Ref('loginRef') readonly loginModel!: HTMLElement;
  @Ref('cell') cell!: HTMLDocument;
  public user = {
    nickname: '立即登录'
  }

  public show: boolean = false

  public handleUserClick() {
    this.loginModel?.handleShow()
  }

}
</script>

<style lang="scss">
.me {
  padding: 0 16px;
  background: #F6F6F6;
  min-height: 100vh;

  .me-content {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;


    .me-left {
      width: 48%;
      box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 10%);
      border-radius: 6px;
      padding: 8px;
      background: #FFF;
    }

    .me-right {
      width: 48%;
      box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 10%);
      border-radius: 6px;
      background: #FFF;
    }
  }
}
</style>